<template>
  <div class="demo">
    <template>
      <div v-if="mode === 'edit'">
        <!-- 单滑块 -->
        <el-slider
          v-model="sliderValue"
          :vertical="vertical"
          :disabled="disabled"
          @change="onChange"
          v-if="!range"
        ></el-slider>
        <!-- 双滑块 -->
        <el-slider
          v-model="sliderValueRange"
          :range="range"
          :vertical="vertical"
          :disabled="disabled"
          show-stops
          @change="onRangeChange"
          v-if="range"
        >
        </el-slider>
      </div>
      <div v-else>{{ value }}</div>
    </template>
  </div>
</template>

<script>
export default {
  name: "pm-slider",
  components: {},
  props: {
    value: {},
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    range: {
      type: Boolean,
      default: false,
    },
    vertical: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      sliderValue: "",
      sliderValueRange: [0, 100],
    };
  },
  computed: {},
  watch: {},
  created() {
    console.log(this.disabled,'disabled')
    console.log(this.readonly,'readonly')
    console.log(this.value,'readonly')
    if (this.value) {
      this.sliderValue = JSON.parse(this.value)
      this.sliderValueRange = JSON.parse(this.value)
    }
  },
  mounted() {},
  methods: {
    onChange() {
      console.log(this.sliderValue);
      this.$emit("input", this.sliderValue);
      this.$message({
        message: "当前值：" + this.sliderValue,
      });
    },
    onRangeChange() {
      this.$emit("input", this.sliderValueRange);
      this.$message({
        message: "当前值：" + this.sliderValueRange,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.demo {
  width: 100%;
  .el-slider.is-vertical {
    height: 100px;
  }
}
</style>
